<template>
  <div>
        <el-row :gutter="20" style="position: relative">
            <el-col :span="6">
              <el-input
                v-model="seachlist.name"
                placeholder="平台名称"
                clearable
              >
                <el-button
                  slot="append"
                  @click="getTableList"
                  icon="el-icon-search"
                ></el-button>
              </el-input>
            </el-col>
            <el-button
              style="position: absolute; right: 10px"
              type="primary"
              @click="updateBatch"
              >更新排序</el-button
            >
          </el-row>

        <el-table :data="tableList" border stripe>
            <el-table-column
              label="序号"
              prop="sort"
              width="120px"
            ></el-table-column>
            <el-table-column label="平台名称" prop="dcName"></el-table-column>
            <el-table-column label="平台图标">
              <template slot-scope="scope">
                <img :src="scope.row.icon" alt="" class="scope-img" />
              </template>
            </el-table-column>
            <el-table-column
              label="链接"
              prop="dcPath"
              width="300px"
            ></el-table-column>
            <el-table-column label="是否推荐" align="center">
              <template slot-scope="scope">
                <i v-if="scope.row.type == 1" class="el-icon-success"></i>
                <i v-else-if="scope.row.type == 0" class="el-icon-error"></i>
              </template>
            </el-table-column>
            <el-table-column label="状态"  align="center">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  @change="statusChanged(scope.row, scope.row.id)"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="1"
                  inactive-value="0"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column
              label="序号"
              prop="sort"
              width="200px"  align="center"
            >
            <template slot-scope="scope">
                <el-input-number size="small" v-model="scope.row.sort"></el-input-number>
                <!-- <el-input placeholder="请输入序号" v-model="scope.row.sort"  clearable> </el-input> -->
            </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click="updateLoanMarketChannel(scope.row)" type="primary" size="mini">更新</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageCount"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
  </div>
</template>

<script>
export default {
    name:"TabeList",
    data(){
        return{
            tableList: [],
            pageCount: 1,
            pageSize: 20,
            total: 0,
            pageCountC: 1,
            seachlist: { name: "" },
            channelCode:""
        }
    },
    created(){
        // debugger
        this.channelCode=this.$route.query.channelCode;
        this.getTableList();
    },
    props:{
        status:{
            type:String,
            default:"1"
        }
    },
    methods:{
        async getTableList() {
            const loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            const { data: res } = await this.$http.post("/loanMarket/listLoanMarketChannel", {
                name: this.seachlist.name,
                status: this.status,
                pageCount: this.pageCount,
                pageSize: this.pageSize,
                channelCode:this.channelCode
            });
            // console.log(res);
            this.tableList = res.data.records;
            this.total = res.data.total;
            setTimeout(() => {
                loading.close();
            }, 500);
        },
        // 监听switch状态改变
        async statusChanged(tableList, id) {
            const loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            const { data: res } = await this.$http.post("/loanMarket/updateLoanMarketChannelStatus", {
                id: id,
                type: tableList.status,
            });
            setTimeout(() => {
                loading.close();
            }, 500);
            this.getTableList();
            if (res.code !== 200) {
                return this.$message.error("修改单个贷超借款营销状态失败");
            }
            this.$message.success("修改单个贷超借款营销状态成功");

            this.getTableList();
        },
        async updateLoanMarketChannel(row){
            debugger
            const loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            const { data: res } = await this.$http.post("/loanMarket/updateLoanMarketChannel", {
                id:row.id,
                status:row.status,
                sort:row.sort
            });
            setTimeout(() => {
                loading.close();
            }, 500);
            this.getTableList();
            if (res.code !== 200) {
                return this.$message.error("修改排序失败");
            }
            this.$message.success("修改排序成功");
        },
        async updateBatch(){
            debugger
            const loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            const { data: res } = await this.$http.post("/loanMarket/updateBatchLoanMarketChannel", this.tableList);
            setTimeout(() => {
                loading.close();
            }, 500);
            this.getTableList();
            if (res.code !== 200) {
                return this.$message.error("修改排序失败");
            }
            this.$message.success("修改排序成功");
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.getTableList();
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.pageCount = val;
            this.getTableList();
        },
    }
}
</script>


<style lang="less" scoped>
.tablelist-li-tit {
  font-size: 12px;
  color: #3878ea;
  margin-bottom: 4px;
  cursor: pointer;
}
.scope-img {
  height: 50px;
  width: 50px;
}
.el-icon-success {
  font-size: 26px;
  color: green;
}
.el-icon-error {
  font-size: 26px;
  color: #d60404;
}
.formitem {
  display: flex;
  align-items: center;
}
.el-form-item {
  margin-bottom: 10px;
}
.inp-1 {
  width: 30%;
  margin-right: 10px;
}
.inp-2 {
  width: 20%;
}
.editIcon {
  width: 80px;
  height: 80px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #d9d9d9;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.el-transfer-panel__filter .el-input__icon{
  margin-left: 15px; ;
}
</style>
